
<div class="row mt-4">

  <!-- 1 - database -->
  <div class="col-12">
    <p class="fw-bold mb-0">Choose a database</p>
  </div>

  <div class="col-12">
    <div class="row align-items-stretch">

      <!-- Database types -->
      <div class="col-md-4 col-sm-6 col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading">

          <app-loading-skeleton
            amount="1"
            colClass="col-12 mb-3"
            blockHeight="45px"
            hasShadow="false">
          </app-loading-skeleton>

        </ng-container>

        <mat-form-field class="w-100" *ngIf="!isLoading">
          <span
            matPrefix
            matTooltip="Choose database type"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>database</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <mat-select
            placeholder="Database type"
            [(ngModel)]="selectedDbType"
            (selectionChange)="getConnectionString()">
            <mat-option
              *ngFor="let item of databaseTypes"
              [value]="item.type">{{item.name}}</mat-option>
          </mat-select>
        </mat-form-field>

      </div>

      <!-- Connection strings -->
      <div class="col-md-4 col-sm-6 col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading">

          <app-loading-skeleton
            amount="1"
            colClass="col-12 mb-3"
            blockHeight="45px"
            hasShadow="false">
          </app-loading-skeleton>

        </ng-container>

        <mat-form-field class="w-100" *ngIf="!isLoading">
          <span
            matPrefix
            matTooltip="Choose connection string"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>conversion_path</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <mat-select
            placeholder="Connection string"
            [(ngModel)]="selectedConnectionString"
            (selectionChange)="getConnectionString()">
            <mat-option
              *ngFor="let item of connectionStrings"
              [value]="item">{{item}}</mat-option>
          </mat-select>
        </mat-form-field>

      </div>

      <!-- Database list -->
      <div class="col-md-4 col-sm-6 col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading">

          <app-loading-skeleton
            amount="1"
            colClass="col-12 mb-3"
            blockHeight="45px"
            hasShadow="false">
          </app-loading-skeleton>

        </ng-container>

        <mat-form-field class="w-100" *ngIf="!isLoading">
          <span
            matPrefix
            matTooltip="Choose database"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>database</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <mat-select
            placeholder="Databases"
            [(ngModel)]="selectedDatabase"
            (selectionChange)="changeDatabase()">
            <mat-option
              *ngFor="let item of databases | sortBy: 'name'"
              [value]="item.name">{{item.name}}</mat-option>
          </mat-select>
        </mat-form-field>

      </div>
    </div>
  </div>

  <!-- 2 - Method, URL & Authorisation -->
  <div class="col-12">
    <p class="fw-bold mb-0">Method, URL & Authorization</p>
  </div>

  <div class="col-12">
    <div class="row align-items-stretch mt-0">

      <!-- Methods -->
      <div class="col-md-3 col-sm-6 col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading">

          <app-loading-skeleton
            amount="1"
            colClass="col-12 mb-3"
            blockHeight="45px"
            hasShadow="false">
          </app-loading-skeleton>

        </ng-container>

        <mat-form-field class="w-100" *ngIf="!isLoading">
          <span
            matPrefix
            matTooltip="Choose HTTP method of endpoint"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>http</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <mat-select
            placeholder="Choose method"
            [(ngModel)]="selectedMethod">
            <mat-option
              *ngFor="let item of methods"
              [value]="item">{{item}}</mat-option>
          </mat-select>
        </mat-form-field>

      </div>

      <!-- Primary URL -->
      <div class="col-md-3 col-sm-6 col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading">

          <app-loading-skeleton
            amount="1"
            colClass="col-12 mb-3"
            blockHeight="45px"
            hasShadow="false">
          </app-loading-skeleton>

        </ng-container>

        <mat-form-field class="w-100" *ngIf="!isLoading">
          <span
            matPrefix
            matTooltip="Primary URL of endpoint"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>link</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="Primary URL"
            [(ngModel)]="primaryURL">
        </mat-form-field>

      </div>

      <!-- Secondary URL -->
      <div class="col-md-3 col-sm-6 col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading">

          <app-loading-skeleton
            amount="1"
            colClass="col-12 mb-3"
            blockHeight="45px"
            hasShadow="false">
          </app-loading-skeleton>

        </ng-container>

        <mat-form-field class="w-100" *ngIf="!isLoading">
          <span
            matPrefix
            matTooltip="Secondary URL of endpoint"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>link</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <input
            matInput
            type="text"
            placeholder="Secondary URL"
            [(ngModel)]="secondaryURL">
        </mat-form-field>

      </div>

      <!-- List of roles -->
      <div class="col-md-3 col-sm-6 col-12">

        <!-- Loading skeleton -->
        <ng-container *ngIf="isLoading">

          <app-loading-skeleton
            amount="1"
            colClass="col-12 mb-3"
            blockHeight="45px"
            hasShadow="false">
          </app-loading-skeleton>

        </ng-container>

        <mat-form-field class="w-100" *ngIf="!isLoading">
          <span
            matPrefix
            matTooltip="Role(s) required to invoke endpoint"
            class="d-flex flex-nowrap align-items-center justify-content-between me-2">
            <mat-icon>shield</mat-icon>
            <span class="text-muted">|</span>
          </span>
          <mat-select
            placeholder="Role(s) required to invoke endpoint"
            multiple
            [formControl]="selectedRoles"
            disableOptionCentering
            panelClass="custom-select-option">
            <mat-option *ngFor="let item of roles | sortBy: 'name'" [value]="item.name">
              {{item.name}}
            </mat-option>
          </mat-select>
        </mat-form-field>

      </div>
    </div>
  </div>

  <!-- 3 - Settings and Arguments -->
  <div class="col-12 mt-0">
    <div class="row">

      <!-- Settings -->
      <div class="col-md-6 col-12">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <p class="fw-bold text-nowrap my-0">Settings</p>
          <div class="py-2">&nbsp;</div>
        </div>

        <div class="col-12">
          <div class="d-flex align-items-center flex-wrap mt-0">

            <mat-checkbox
              color="primary"
              [disabled]="isLoading"
              [(ngModel)]="overwrite">
              Overwrite
            </mat-checkbox>

          </div>
        </div>
      </div>

      <!-- 4 - Arguments -->
      <div class="col-md-6 col-12">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <p class="fw-bold text-nowrap my-0">Arguments</p>

          <button
            mat-button
            [disabled]="isLoading"
            color="primary"
            (click)="addArgument()">
            Add argument
          </button>

        </div>

        <ng-container *ngIf="arguments && arguments.length === 0;else hasArguments">
        </ng-container>

        <ng-template #hasArguments>

          <mat-chip-list aria-label="Arguments for endpoint">

            <mat-chip
              *ngFor="let item of arguments"
              (removed)="removeArgument(item)">
              {{item.name}}

              <button matChipRemove>
                <mat-icon>cancel</mat-icon>
              </button>

            </mat-chip>

          </mat-chip-list>

        </ng-template>

      </div>
    </div>
  </div>

  <!-- SQL -->
  <div class="col-12 mt-3">
    <div class="d-flex justify-content-between align-items-center">
      <p class="fw-bold mb-0">SQL</p>
      <div>

        <button
          mat-button
          color="primary"
          matTooltip="Keyboard shortcuts"
          (click)="viewShortkeys()">
          Shortkeys
        </button>

        <button
          mat-button
          color="primary"
          matTooltip="Load SQL from collection of snippets"
          (click)="loadSnippet()">
          Snippets
        </button>

      </div>
    </div>
  </div>

  <div class="col-12 mt-0">

    <app-codemirror-sql
      [(model)]="sql"
      class="codemirror-container">
    </app-codemirror-sql>

  </div>

  <div class="col-12 d-flex justify-content-end button-row mt-5">

    <button
      mat-flat-button
      color="primary"
      class="px-5 mb-4"
      (click)="generate()"
      [disabled]="waiting || !sql.sql || sql.sql === ''">
      Generate
    </button>

  </div>

</div>